<!DOCTYPE html>
<html style="width: 100%;height: 100%;">
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<!-- 资 源 引 入 -->
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
		<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
		<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<script>
			document.write("<link rel='stylesheet' href='/static/component/laytp/css/laytp.css?v="+localStorage.getItem("version")+"'>");
			document.write("<link rel='stylesheet' href='/static/admin/css/other/login.css?v="+localStorage.getItem("version")+"'>");
		</script>
	</head>
	<style>
		html, body {width: 100%;height: 100%;overflow: hidden;}
		body {background: #1E9FFF;}
		body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
		.layui-container {width: 100%;height: 100%;overflow: hidden}
		.admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
		.login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
	</style>
    <!-- 代 码 结 构 -->
	<body>
	<div class="layui-container">
		<div class="admin-login-background">
			<div class="layui-form login-form" style="margin-top: 0 !important;">
				<form class="layui-form" lay-filter="layui-form" action="javascript:void(0);" style="margin-top: 0 !important;">
					<div class="layui-form-item">
						<img class="logo" src="{$shop_logo}" />
						<div class="title">{$shop_name}</div>
						<div class="desc">

						</div>
					</div>
					<div class="layui-form-item">
						<input name="username" placeholder="账 户 : " lay-verify="required" hover class="layui-input" autocomplete="off"  />
					</div>
					<div class="layui-form-item login-form-item">
						<input type="password" name="password" placeholder="密 码 : " lay-verify="required" hover class="layui-input"  />
					</div>
					<div class="layui-form-item login-form-item verifyCodeItem">
						<input name="verify_code" placeholder="验证码 : " hover lay-verify="required" class="code layui-input layui-input-inline" autocomplete="off"  />
						<img class="codeImage" />
					</div>
					<div class="layui-form-item login-form-item">
						<input type="checkbox" name="remember" title="记住密码" lay-skin="primary" checked>
					</div>
					<div class="layui-form-item login-form-item">
						<button type="submit" class="laytp-btn laytp-btn-primary login" lay-submit lay-filter="login">
							登 入
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	</body>
	<!-- 依 赖 脚 本 -->
	<script>
		document.write("<link rel='stylesheet' href='/static/component/laytp/css/laytp.css?v=" + localStorage.getItem("version") + "'>");
		document.write("<script src='/static/component/layui/layui.js?v="+localStorage.getItem("version")+"'><\/script>");
		document.write("<script src='/static/component/laytp/layuiConfig.js?v="+localStorage.getItem("version")+"'><\/script>");
	</script>
	<script src="/static/jquery.js" charset="utf-8"></script>
	<script src="/static/jquery.particleground.min.js" charset="utf-8"></script>
	<!-- 框 架 初 始 化 -->
	<script>
		// 粒子线条背景
		$(document).ready(function(){
			$('.layui-container').particleground({
				dotColor:'#7ec7fd',
				lineColor:'#7ec7fd'
			});
		});

		let tokenCookieKey = "laytpAdminToken";//Header中传递的token的key名称
        let tokenKey = "LayTp-Admin-Token";//Header中传递的token的key名称
        let ajaxHeaders = {
            "LayTp-Admin-Token": getCookie(tokenCookieKey),
            "Cache-Control": "no-cache"
        };//ajax请求默认发送的Header部分

        function getCookie(name) {
            let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
            if (arr != null) {
                return (arr[2]);
            } else {
                return "";
            }
        }

        layui.use(['laytp','button'], function() {
            var form = layui.form;
            var $ = layui.$;
            var context = layui.context;
			// $('body').attr('background', '{$login_bg}');
			// $('.logo').attr('src', '{$shop_logo}');
			// $('.title').text('{$shop_name}');
			$('.codeImage').attr('src', '{:captcha_src()}');

            //获取是否需要验证码配置项
            facade.ajax({
                route: "/admin/Admin/getLoginNeedCaptchaConf",
                successAlert: false
            }).done(function (res) {
                if (res.code === 0) {
                    if(res.data == 1){
						$('.codeImage').attr('src', '{:captcha_src()}');
                    }else{
                        $(".verifyCodeItem").remove();
                    }
                }
                // 背景图，验证码都是使用js动态加载的，因此需要先隐藏整个body层，然后执行加载背景图和验证码，然后显示body层，如果不这么做，页面加载时会闪烁
                $('body').show();
            });

			var username = localStorage.getItem("username");
			var password = localStorage.getItem("password");
			if(username){
				$('input[name="username"]').val(username);
			}
			if(password){
				$('input[name="password"]').val(password);
			}

            //点击验证码图片，获取新的验证码图片地址
            layui.$(document).off("click", ".codeImage").on("click", ".codeImage", function () {
				this.src = "{:captcha_src()}";
            });

            // 登 录 提 交
            form.on('submit(login)', function(data) {
                data.field.session_id = facade.getCookie('PHPSESSID');
				$.post("/admin/Admin/login",data.field,function(res){
					if (res.status === 1) {
						layer.msg("登录成功", {icon: 1});
						if(data.field.remember=="on") {
							localStorage.setItem("username", data.field.username);
							localStorage.setItem("password", data.field.password);
						}else{
							localStorage.removeItem("username");
							localStorage.removeItem("password");
						}
						setTimeout(function(){
							window.location.href = '/admin/Index/index';
						},1000)
					} else {
						layer.msg(res.msg, {icon: 2});
						$(".codeImage").click();
					}
				})
                return false;
            });
        });
	</script>
</html>
